import React, {useState} from 'react'
import {View, Image, Text} from '@tarojs/components'
import CustomerInput from '@/components/Input/Input'
import Taro, {useReady} from '@tarojs/taro'
import {getPicture} from '@/packageC/api/cloudMap'
import PageLoading from '@/components/PageLoading/PageLoading'
import './CloundMap.scss'

interface CloudItem {
  id: string
  title: string
  content: string
  userId: string
  imgUrl: string
  likeNum: number
}

const CloudMap: React.FC = () => {
  const [cloudData, setCloudData] = useState<CloudItem[]>([])
  useReady(() => {
    getPicture().then(res => {
      console.log(res)
      setCloudData(res.records)
    })
  })

  function onUpload () {
    Taro.navigateTo({
      url: '/packageC/pages/Upload/Upload?type=cloudMap'
    })
  }

  return <View className='container'>
    <View className='cloud_input'>
      <CustomerInput />
    </View>
    <View className='cloud_title'>
      <View className='cloud_title_text'>云图</View>
      <View className='iconfont' onClick={onUpload}>&#xe661;</View>
    </View>
    <View className='cloud_list'>
      {
        cloudData.length ? cloudData.map(item => <View className='cloud_list_item' key={item.id}>
          <Image className='cloud_list_item_img' src={item.imgUrl} />
          <View className='cloud_wrap'>
            <Text className='cloud_wrap_title'>{item.title}</Text>
            <View className='cloud_wrap_box'>
              <Text className='cloud_wrap_box_content'>{item.content}</Text>
              {
                item.likeNum !== 0 ? <Text className='iconfont'>&#xe622; {item.likeNum}</Text> : <></>
              }
            </View>
          </View>
        </View>) : <PageLoading />
      }
    </View>
  </View>
}

export default CloudMap
